<template>
  <div>
    <Tabs :text="text">
      <Search
        ref="search"
        @data="upState"
        @easySearch="easySearch"
        v-if="searchState"
      />
    </Tabs>
    <template v-if="searchItemState">
      <AfterSaleSearchItem v-if="state" />
    </template>
    <template>
      <SearchTypes :state="state" :addList="addList" @setState="setState" />
    </template>
    <router-view></router-view>
  </div>
</template>

<script>
import Tabs from "../../components/Tabs.vue";
import AfterSaleSearchItem from "../../components/AfterSaleComponent/AfterSaleSearchItem.vue";
import SearchTypes from "../../components/SearchTypes.vue";
import Search from "../../components/Search.vue";
import { mapMutations } from "vuex";

export default {
  components: {
    Tabs,
    Search,
    AfterSaleSearchItem,
    SearchTypes,
  },
  created() {},
  data() {
    return {
      state: false,
      searchItemState: true,
      searchState: true,
      val: "",
      addList: "/afterSale/afterSaleAdd",
      // addAfterSale: "/afterSale/addAfterSale",
      text: [
        {
          id: "1",
          textName: "售后列表",
          url: "/afterSale/afterSaleList",
        },
        {
          id: "2",
          textName: "未处理",
          url: "/afterSale/afterSaleProcessed?afterState=processed",
        },
        {
          id: "3",
          textName: "处理中",
          url: "/afterSale/afterSaleProcessing?afterState=processing",
        },
        {
          id: "4",
          textName: "已处理",
          url: "/afterSale/afterSaleUntreated?afterState=untreated",
        },
        {
          id: "5",
          textName: "数据导出",
          url: "/afterSale/afterSaleList",
        },
        {
          id: "6",
          textName: "新增售后",
          url: "/afterSale/afterSaleAdd",
        },
      ],
    };
  },
  methods: {
    ...mapMutations(["setSearchVal"]),

    upState(data) {
      this.state = !data; //状态处理
    },
    setState(searchItemState, state) {
      this.searchItemState = searchItemState;
      this.state = state;
      if (this.$refs.search) {
        this.$refs.search.flag = state;
      }
      // console.log(this.searchItemState);
      // console.log(this.state);
    },
    easySearch(val) {
      // this.setIsEasySearch(true);
      this.setSearchVal(val);
      // console.log(val);
    },
  },
  watch: {
    $route(to) {
      console.log(to.path);
      if (
        to.path == "/afterSale/addAfterSale" ||
        to.path == "/afterSale/newAfterSale" ||
        to.path == "/afterSale/afterSaleAttachment"
      ) {
        this.searchState = false;
      } else {
        this.searchState = true;
      }
    },
  },
};
</script>

<style>
</style>